﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>btable</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/btable.css" />
    <script src="/static/js/inout/jquery-1.8.2.min.js"></script>
</head>

<body style=" background-color: gainsboro;">

<div style="margin:0px; background-color: white; margin:0 10px;">
    <blockquote class="layui-elem-quote">
        <button type="button" class="layui-btn layui-btn-small" id="add"><i class="fa fa-plus" aria-hidden="true"></i> 添加</button>
        <form class="layui-form" style="float:right;" action="/admin/auth/selecsl" method="post" id="search">
            <div class="layui-form-item" style="margin:0;">
                <div class="layui-input-inline">
                    <div class="layui-input-inline">
                        <select name="pid" lay-verify="" id="grouppid" lay-filter="group">
                            {empty name='data'}
                                <option value="-1">选择分类</option>
                            {else/}
                            {volist name='data' id='dt'}
                                <option value="{$dt.id}">{$dt.title}</option>
                            {/volist}
                            {/empty}
                        </select>
                    </div>
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="分类名称" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" style="padding:0;">
                    <button lay-filter="search" class="layui-btn" lay-submit type="submit"><i class="fa fa-search" aria-hidden="true"></i> 查询</button>
                </div>
            </div>
        </form>
    </blockquote>
    <div id="content" style="width: 100%;height: 533px;"></div>
</div>
<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/js/',
        v: new Date().getTime()
    }).use(['btable', 'form'], function () {
        var btable = layui.btable(),
                $ = layui.jquery,
                layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
                layer = layui.layer,//获取当前窗口的layer对象;
                form = layui.form();

        btable.set({
            openWait: true,//开启等待框
            elem: '#content',
            url: '/admin/Adminmanualcourse/getList', //数据源地址
            pageSize: 1000,//页大小
            params: {
                t: new Date().getTime(), //额外的请求参数
                pid:$('#grouppid').val()
            },
            columns: [{ //配置数据列
                fieldName: '分类名称', //显示名称
                field: 'title', //字段名
            }, {
                fieldName: '状态',
                field: 'status',
                format: function (val, obj) {
                    var str='';
                    if(obj.status == 1){
                        str='checked';
                    }
                    var html = '<form class="layui-form" action=""><input data-id='+val+' data='+obj.status+' type="checkbox" id="liststatus" lay-skin="switch" title="状态" lay-text="启用|禁用" lay-filter="status" '+str+'></status>';
                    return html;
                }
            },{
                fieldName: '排序',
                field: 'sort',
            },{
                fieldName: '操作',
                field: 'id',
                format: function (val,obj) {
                    if(obj.icon==null){
                        obj.icon = "";
                    }
                    var html = '<input type="button" value="修改" id="edit" data-action="edit" data-id="'+val+'" data-title="'+obj.title+'" data-pid="'+obj.pid+'" data-status="'+obj.status+'" data-sort="'+obj.sort+'" class="layui-btn layui-btn-mini" />'+
                            '<input type="button" value="删除" data-action="del" data-id="'+val+'" class="layui-btn layui-btn-mini layui-btn-danger del" name="del" />';
                    return html;
                }
            }],
            even: true,//隔行变色
            field: 'id', //主键ID
            //skin: 'row',
            checkbox: false,//是否显示多选框
            paged: false, //是否显示分页
            singleSelect: false, //只允许选择一行，checkbox为true生效
            onSuccess: function ($elem) { //$elem当前窗口的jq对象
                $elem.children('tr').each(function () {
                    $(this).children('td:last-child').children('input').each(function () {
                        var $that = $(this);
                        var action = $that.data('action');
                        var id = $that.data('id');
                        var status = $that.data('status');
                        var title = $that.data('title');
                        var sort = $that.data('sort');
                        var statusStr = (status==1)?'checked':'';
                        var pid = $that.data('pid');
                        $that.on('click', function () {
                            switch (action) {
                                case 'edit':
                                    var cons ='<div style="padding:10px;">'+
                                                '<form class="layui-form" id="edit_form" action=""><input type="hidden" name="id" value="'+id+'"/>'+
                                                '<div class="layui-form-item layui-form-text"><label class="layui-form-label">标题</label><div class="layui-input-block">'+
                                                        '<input type="text" class="layui-input" lay-verify="required" style="margin-bottom:5px;" id="title" name="title" value="'+title+'" placeholder="标题">'+
                                                '</div></div>'+
                                                '<div class="layui-form-item layui-form-text"><label class="layui-form-label">排序</label><div class="layui-input-block">'+
                                                        '<input type="text" class="layui-input" style="margin-bottom:5px;" lay-verify="required" id="sort" name="sort" value="'+sort+'" placeholder="排序">'+
                                                '</div></div>'+
                                                '<div class="layui-form-item layui-form-text"><label class="layui-form-label">上级分类</label><div class="layui-input-block">'+
                                                        '<select id="pid" name="pid" id="pid">'+
                                                                    {volist name="data" id="dt"}
                                                                        '<option value="{$dt.id}" >{$dt.title}</option>'+
                                                                    {/volist}
                                                        '</select>'+
                                                '</div></div>'+
                                                '<div class="layui-form-item layui-form-text"><label class="layui-form-label">状态</label><div class="layui-input-block">'+
                                                        '<input type="checkbox" lay-skin="switch" title="状态" lay-text="启用|禁用" lay-filter="isShow" '+statusStr+'> <input name="status" id="status" type="hidden" value="'+status+'"/>'+
                                                '</div></div>'+
                                                '</form></div>';
                                    var openindex = layer.open({
                                        type: 1,
                                        title: '修改手册分类',
                                        content: cons,
                                        btn: ['确定', '取消'],
                                        area: ['600px', '380px'],
                                        success:function(layero, index){
                                                    $('#pid').val(pid);
                                                    form.render();
                                                    
                                        },
                                        yes: function (index, layero) {
                                            //这是核心的代码。
                                            var status = $("#status").val();
                                            var title = $("#title").val();
                                            var sort = $("#sort").val();
                                            if(title==''){
                                                layer.msg("标题不能为空");
                                                return false;
                                            }
                                            if(status==''){
                                                layer.msg("状态不能为空");
                                                return false;
                                            }
                                            if(sort==''){
                                                layer.msg("排序不能为空");
                                                return false;
                                            }
                                            $.ajax({
                                                type:"post",
                                                dataType: "json",
                                                url: "/admin/Adminmanualcourse/saveData",
                                                data:$("#edit_form").serialize(),
                                                success:function(res){
                                                    if(res.status==0){
                                                        var data=$('#search').serialize();//获取值
                                                        data= decodeURIComponent(data,true);//防止中文乱码
                                                        var json=DataDeal.formToJson(data);//转化为json
                                                        btable.get(JSON.parse(json));
                                                        
                                                        layer.close(openindex);
                                                        layer.msg(res.msg);
                                                    }else{
                                                        layer.msg(res.msg);
                                                    }
                                                }
                                            });

                                        },
                                        maxmin: true
                                    });
                                    break;
                                case 'del': //删除
                                    layer.confirm('确定要删除？', {
                                        btn: ['确定','取消'] //按钮
                                    }, function(){
                                        var id = $that.attr('data-id');
                                        $.ajax({
                                            type:"post",
                                            dataType: "json",
                                            url: "/admin/Adminmanualcourse/del",
                                            data:{
                                                id:id
                                            },
                                            success:function(res){
                                                if(res.status==0){
                                                    layer.msg(res.msg,{icon: 1});
                                                    
                                                    btable.render();
                                                    //btable.render();
                                                }else{
                                                    layer.msg(res.msg,{icon: 1});
                                                }
                                            }
                                        });
                                    }, function(){

                                    });
                                    break;
                            }
                        });
                    });
                });
            }
        });
        btable.render();
        //监听搜索表单的提交事件
        form.on('submit(search)', function (data) {
            btable.get(data.field);
            return false;
        });
        
        form.on('select(group)', function(data){
            var data=$('#search').serialize();//获取值
           
            data= decodeURIComponent(data,true);//防止中文乱码
            var json=DataDeal.formToJson(data);//转化为json
            btable.get(JSON.parse(json));
            return false;
          });
          
          
          
          var DataDeal = {
            //将从form中通过$('#form').serialize()获取的值转成json
                formToJson: function (data) {
                    data=data.replace(/&/g,"\",\"");
                    data=data.replace(/=/g,"\":\"");
                    data="{\""+data+"\"}";
                    return data;
                 },
            };
            
        $(window).on('resize', function (e) {
            var $that = $(this);
            $('#content').height($that.height() - 92);
        }).resize();
        
        //修改状态
        form.on('switch(status)', function(data){
            var status = (this.checked ? 1: 2);
                    $.ajax({
                        type:"post",
                        dataType: "json",
                        url: "/admin/Adminmanualcourse/editStatus",
                        data:{status:status,id:$(this).attr('data-id')},
                        success:function(res){
                            if(res.status==0){
                                layer.msg(res.msg);
                            }else{
                                layer.msg(res.msg);
                            }
                        }
                    });
              })
                  
        //添加数据 操作--------------------------------------------------------
        form.on('switch(isShow)', function(data){
                        var status=1;
                        $(this).is(":checked")?status=1:status=2;
                        $('#status').val(status);
                  })
                  
        $('#add').on('click', function () {
            var con ='<div style="padding:10px;">'+
                            '<form class="layui-form" id="add_form" action="">'+
                                    '<div class="layui-form-item layui-form-text"><label class="layui-form-label">标题</label><div class="layui-input-block">'+
                                            '<input type="text" class="layui-input" lay-verify="required" style="margin-bottom:5px;" id="title" name="title" placeholder="标题">'+
                                    '</div></div>'+
                                    '<div class="layui-form-item layui-form-text"><label class="layui-form-label">排序</label><div class="layui-input-block">'+
                                            '<input type="text" class="layui-input" style="margin-bottom:5px;" lay-verify="required" id="sort" name="sort" placeholder="排序">'+
                                    '</div></div>'+
                                    '<div class="layui-form-item layui-form-text"><label class="layui-form-label">上级分类</label><div class="layui-input-block">'+
                                            '<select name="pid" id="pid">'+
							{volist name="data" id="dt"}
                                                            '<option value="{$dt.id}" >{$dt.title}</option>'+
                                                        {/volist}
                                            '</select>'+
                                    '</div></div>'+
                                    '<div class="layui-form-item layui-form-text"><label class="layui-form-label">状态</label><div class="layui-input-block">'+
                                            '<input type="checkbox" lay-skin="switch" title="状态" lay-text="启用|禁用" lay-filter="isShow" checked> <input name="status" id="status" type="hidden" value="1"/>'+
                                    '</div></div>'+
                                    '</form></div>';
            var openindex = layer.open({
                type: 1,
                title: '添加手册分类',
                content: con,
                btn: ['确定', '取消'],
                area: ['600px', '380px'],
                success:function(layero, index){
                            form.render();
                },
                yes: function (index, layero) {

                    if($("#title").val()==''){
                        layer.msg("标题不能为空");
                        return false;
                    }
                    if($("#sort").val()==''){
                        layer.msg("排序不能为空");
                        return false;
                    }

                    //这是核心的代码。
                    $.ajax({
                        type:"post",
                        dataType: "json",
                        url: "/admin/Adminmanualcourse/saveData",
                        data:$("#add_form").serialize(),
                        success:function(res){
                            if(res.status==0){
                                var data=$('#search').serialize();//获取值
                                data= decodeURIComponent(data,true);//防止中文乱码
                                var json=DataDeal.formToJson(data);//转化为json
                                btable.get(JSON.parse(json));
                                
                                layer.close(openindex);
                                layer.msg(res.msg);
                               // setTimeout('location.href="/admin/auth/index"',1000);
                            }else{
                                layer.msg(res.msg);
                            }
                        }
                    });
                },
                maxmin: true
            });
        });
    });
</script>
</body>
</html>